<template>
  <div class="home-page">
    <!-- 导航栏 -->
    <NavigationBar />

    <!-- 卡片部分 -->
    <div class="home-card">
      <img class="card-img" :src="getImg(detail.img)" />
      <p class="card-name">{{ detail.name }}</p>
      <van-tag :class="['card-tag', 'item-tag-' + detail.status]" plain type="primary">{{ getStatus(detail.status) }}</van-tag>

      <div class="card-menus">
        <div class="menu-item">
          <i class="iconfont icon-dangan menu-icon"></i>
          <p class="menu-name">健康档案</p>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-jiankangjilu menu-icon"></i>
          <p class="menu-name">健康记录</p>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-qianyuexinxi menu-icon"></i>
          <p class="menu-name">签约信息</p>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-custom-service menu-icon"></i>
          <p class="menu-name">服务记录</p>
        </div>
      </div>
    </div>

    <!-- 个人信息部分 -->
    <div class="home-info">
      <p class="info-title">个人信息</p>

      <van-form>
        <van-cell-group>
          <van-field
            v-model="detail.id"
            name="身份证号"
            label="身份证号"
            disabled
          />
          <van-field
            v-model="detail.sex"
            name="性别"
            label="性别"
            disabled
          />
          <van-field
            v-model="detail.age"
            name="年龄"
            label="年龄"
            disabled
          />
          <van-field
            v-model="detail.phone"
            name="联系电话"
            label="联系电话"
            disabled
          />
          <van-field
            v-model="detail.address"
            name="现居地"
            label="现居地"
            disabled
          />
          <van-field
            v-model="detail.source"
            name="居民来源"
            label="居民来源"
            disabled
          />
          <van-field
            name="真实姓名"
            label="真实姓名"
            disabled
          >
            <template #input>
              <van-tag :class="['item-tag', 'item-tag-' + tag.type]" plain type="primary" v-for="tag in detail.tagList" :key="tag.name">{{ tag.name }}</van-tag>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>

    <!-- 家庭成员部分 -->
    <div class="home-member">
      <p class="member-title">家庭成员</p>

      <div class="member-list">
        <div class="list-item" v-for="item in detail.members" :key="item.id">
          <img class="item-img" :src="getImg(item.img)" />

          <div class="item-info">
            <div class="info-top">
              <span class="info-name">{{ item.name }}</span>
              <span class="info-age">{{ item.age }}岁</span>
              <i class="iconfont icon-nv" v-if="item.sex === 1"></i>
              <i class="iconfont icon-nan" v-else></i>
            </div>

            <p class="info-bottoom">关系：{{ item.relation }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="home-btn">
      <van-button type="primary" color="#49B9AD">添加服务</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import NavigationBar from '@/components/NavigationBar/NavigationBar.vue'
import { getUserDetail } from '@/api/home'

interface Deatil {
  id: string, // 身份证号
  img: string, // 头像
  name: string, // 姓名
  status: string | number, // 签约状态 0-未签约 1-已签约
  sex: number, // 性别 0-男 1-女
  age: number, // 年龄
  phone: string, // 联系电话
  address: string, // 现居地
  source: string, // 居民来源
  tagList: Array<{ // 真实姓名
    type: number, // 类型
    name: string // 名称
  }>, 
  members: Array<{ // 家庭成员
    id: string, // 家庭成员id
    name: string, // 家庭成员姓名
    img: string, // 家庭成员头像
    age: number, // 家庭成员年龄
    sex: number, // 家庭成员性别
    relation: string // 家庭成员关系
  }>
}

onMounted(() => {
  getData()
})

// 获取用户数据
const detail = ref({} as Deatil)
const getData = () => {
  getUserDetail().then(res => {
    detail.value = res.data
  })
}

// 获取签约状态
const getStatus = (status: number | string) => {
  let statusText = ''
  switch(Number(status)) {
    case 0: 
      statusText = '未签约'
      break
    case 1: 
      statusText = '已签约'
      break
    default:
    statusText = '未知'
  }

  return statusText
}

// 获取头像
const getImg = (img: string) => {
  return new URL(`../../assets/img/avatar_${img}.png`, import.meta.url).href
}
</script>

<style lang="scss">
.home-page {
  position: relative;
  width: 100%;
  min-height: 100%;
  position: relative;
  background: #F5F7FB;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: #49B9AD;
  }

  .home-card {
    position: relative;
    margin: 50px 12px 0 12px;
    padding: 52px 12px 12px 12px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;

    .card-img {
      position: absolute;
      top: -45px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      padding: 4px;
      background: #fff;
      border: 1px solid #F6F6F6;
    }

    .card-name {
      font-size: 18px;
      font-weight: 600;
      padding-bottom: 2px;
    }

    .card-tag {
      padding: 1px 4px;
      border-radius: 4px;
      font-size: 12px;
    }

    .item-tag-1 {
      color: #49B9AD;
      border-color: #49B9AD;
      background: #EAFEFA;
    }

    .card-menus {
      width: 100%;
      padding-top: 12px;
      display: flex;
      justify-content: space-between;

      .menu-item {
        text-align: center;
        .menu-icon {
          width: 40px;
          height: 40px;
          padding: 8px;
          font-size: 24px;
          border-radius: 14px;
        }

        .icon-dangan {
          color: #49B9AD;
          background: #EAFEFA;
        }

        .icon-jiankangjilu {
          color: #F89617;
          background: #FFF4E6;
        }

        .icon-qianyuexinxi {
          color: #67A1FF;
          background: #E9F1FF;
        }

        .icon-custom-service {
          color: #F7C300;
          background: #FFF7DA;
        }

        .menu-name {
          padding-top: 8px;
          font-size: 14px;
        }
      }
    }
  }

  .home-info, .home-member {
    padding-top: 8px;
    margin: 0 12px;

    .info-title, .member-title {
      padding: 12px 0;
      font-size: 16px;
    }
  }

  .home-info {
    .van-form {
      border-radius: 12px;
      overflow: hidden;

      .van-cell {
        padding: 14px 12px;
      }

      .van-field__label {
        width: 70px;
      }

      .van-field__control:disabled {
        color: #272B2E;
        -webkit-text-fill-color: #272B2E;
      }

      .item-tag {
        padding: 1px 4px;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 8px;
      }

      .item-tag-0 {
        color: #49B9AD;
        border-color: #49B9AD;
        background: #EAFEFA;
      }

      .item-tag-1 {
        color: #F89617;
        border-color: #F89617;
        background: #FFF4E6;
      }
    }
  }

  .home-member {
    .member-list {
      padding: 12px 0 12px 12px;
      border-radius: 12px;
      overflow: auto;
      background: #fff;
      display: flex;
      flex-wrap: nowrap; /* 禁止换行，保证元素横向排列 */
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .list-item {
        display: flex;
        align-items: center;
        margin-right: 12px;
        padding: 10px 14px;
        background: #F5F7FB;
        border-radius: 12px;
        flex-shrink: 0;

        .item-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .item-info {
          display: flex;
          flex-direction: column;
          padding-left: 10px;

          .info-top {
            display: inline-flex;
            align-items: flex-end;

            .info-name {
              font-size: 16px;
              line-height: 20px;
            }

            .info-age {
              padding: 0 8px;
              font-size: 12px;
              line-height: 14px;
            }

            .iconfont {
              font-size: 14px;
            }

            .icon-nv {
              color: #FA8284;
            }
            
            .icon-nan {
              color: #588EF5;
            }
          }

          .info-bottoom {
            padding-top: 8px;
            font-size: 12px;
            line-height: 14px;
            color: #8D949B;
          }
        }
      }
    }
  }

  .home-btn {
    padding: 0  12px 20px 12px;
    margin-top: 20px;
    background: #fff;

    .van-button {
      width: 100%;
      height: 44px;
      border-radius: 12px;

      .van-button__text {
        color: #fff;
        font-size: 16px;
      } 
    }
  }
}
</style>